import {Link,Outlet} from 'react-router-dom';
import {SmileTwoTone, SmileFilled } from '@ant-design/icons';
import './style/Management.less';
import {useState} from 'react';
import { Button } from 'antd';

function Management(props){
    const ManageList = [
        {title:'DM管理',path:'/management/dmManagement'},
        {title:'地点管理',path:'/management/storeManagement'},
        {title:'剧本管理',path:'/management/jubenManagement'},
        {title:'信息匹配管理',path:'/management/matchManagement'},
        {title:'订单查询',path:'/management/orderManagement'},
        {title:'投诉系统',path:'/management/adviceManagement'}
    ];
    const [ManageMenu] = useState(ManageList);

    const handleNavClick = (e)=>{ //事件委托
        [...e.currentTarget.children].forEach(item=>{
            const li = item.firstChild;
            li.style.backgroundColor = 'rgb(52, 55, 68)';
            li.style.color = '#fff';
         });
        e.target.style.backgroundColor = '#ffc200';
        e.target.style.color = '#000';
    };
    return (
        <div className='management-container'>
            <nav>
                <div className='nav-title-container'>
                    <SmileTwoTone spin style={{fontSize:'40px',color:'#08c'}}/>
                    <span className='nav-title'>剧仙阁</span>
                </div>
                <div className='nav-bar' onClick={handleNavClick}>
                    {ManageMenu.map((item,index)=>{
                        return (
                            <Link to={item.path} key={index}><li><SmileFilled />{item.title}</li></Link>
                        )}
                    )}
                </div>
            </nav>
            
            <main>
                <Outlet/>
                <Button type='primary' style={{position:'fixed',bottom:'10px'}}><Link to='/home'>返回主页按钮</Link></Button>
            </main>
        </div>
    )
}
export default Management;